<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font_3pfmapmfo8q/iconfont.css">
    <style>
        .inter{
            width: 320px;
            height: 600px;
            border: 2px solid #ccc;
            border-radius: 20px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .list{
            width: 320px;
            height: 50px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            display: flex;
            justify-content: space-around;
            position: relative;
            border-top: 2px solid #ccc;
        }
        .obj{
            /* background-color: pink; */
            width: 320px;
            height: 50px;
            border-bottom: 2px solid #ccc;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            line-height: 50px;
            text-align: center;
            
        }
        .content{
            /* background-color: pink; */
            height: 500px;
            width: 320px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            background-image: url("./img/R-C.jpg");
            background-size: 100% 100%;
        }
        .content > div{
            height: 50px;
            width: 320px;
            /* background-color: black; */
            position: relative;
            border-bottom: 1px solid #ccc;
        }
        div > span{
            font-size: 30px;
        }
        .aa{
            position: absolute;
            top: 25px;
        }
        .bb{
            left: 37px;
        }
        .cc{
            right: 37px;
        }
        img{
            width: 40px;
            position: absolute;
            top: 5px;
            left: 10px;
            border-radius: 10px;
        }
        .content div:last-child{
            border-bottom: none;
        }
        .in{
            font-size: 14px;
            position: absolute;
            left: 60px;
        }
        .name{
            top: 4px;
        }
        .mess{
            top:24px;
        }
        .mess > span{
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="inter">
        <div class="obj">
            消息(2)
        </div>
        <div class="content">
            <div>
                <img src="./img/suyu.jpg" alt="">
                <div class="in name">苏雨-班主任</div>
                <div class="in mess"><span>加油好好学习！[超绝可爱表情包]</span></div>
            </div>
            <div>
                <img src="./img/ViKing.jpg" alt="">
                <div class="in name">ViKing老师</div>
                <div class="in mess"><span>未来可期![超绝帅气表情包]</span></div>
            </div>
            <div>
                <img src="./img/小鱼鱼.jpg" alt="">
                <div class="in name">小鱼鱼</div>
                <div class="in mess"><span>帮我带下饭，谢谢义父![可怜]</span></div>
            </div>
            <div>
                <img src="./img/小泰泰.jpg" alt="">
                <div class="in name">小泰泰</div>
                <div class="in mess"><span>帮我带瓶水，谢谢义父![可怜]</span></div>
            </div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="list">
            <div class="aa bb">消息</div>
            <div class="aa">通讯录</div>
            <div class="aa cc">我的</div>
            <span class="iconfont icon-xiaoxi"></span>     
            <span class="iconfont icon-tongxunlu"></span>          
            <span class="iconfont icon-icon-myself-1"></span>          
        </div>
    </div>
</body>
</html>